<template>
  <ContainerGroup class="dept-container" style="flex-direction: row; box-sizing: border-box">
    <!-- 会计分类区域开始 -->
    <Container class="dept-type" :height="height">
      <div class="title">成本项目</div>
      <el-table
        ref="table"
        :data="deptType"
        :show-header="false"
        highlight-current-row
        @row-click="rowClick"
        @hook:mounted="setFirstRowSelected"
      >
        <el-table-column align="center" prop="edCode" label="编码" />
        <el-table-column prop="edName" label="名称" />
      </el-table>
    </Container>
    <!-- 会计分类区域结束 -->

    <!-- 页面主体区域开始 -->
    <Container class="query-box" style="padding: 0; background: #f0f2f5" :height="height">
      <!-- 查询 -->
      <Container style="margin-bottom: 12px">
        <div class="query-form">
          <div>
            <label>
              名称：
              <el-input
                v-model.trim="edName"
                size="mini"
                placeholder="请输入"
                style="width: 120px;margin-right: 10px;"
              />
            </label>
            <label>
              启用状态：
              <el-select v-model="rowStatus" filterable style="width: 120px" size="small">
                <el-option
                  v-for="(item, index) in qyList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </label>
          </div>
          <div class="query-btn">
            <Button style="margin-right: 20px" icon="search" type="primary" @click="getSetData">查询</Button>
            <Button icon="reset" type="info" @click="handleReset">重置</Button>
          </div>
        </div>
      </Container>

      <!-- 表格 -->
      <Container
        class="rule-detail"
        :height="height"
        style="height: calc(100% - 0px); overflow-y: auto"
      >
        <!-- 表格区域标题 -->
        <div class="title">费用要素</div>

        <!-- 按钮 -->
        <div class="button-bar">
          <Button icon="add" @click="addDetail">新增</Button>
          <!-- <Button>导出数据</Button> -->
        </div>
        <!-- 表格 -->
        <div class="table-box">
          <el-table
            height="100%"
            :data="ruleDetail"
            default-expand-all
            border
            :header-cell-style="{
              background: '#fafafa',
              borderColor: '#e7ecf8',
            }"
            row-key="code"
          >
            <el-table-column align="center" type="index" label="序号" width="60" />
            <el-table-column prop="edCode" label="编码" width="160" />
            <el-table-column prop="edName" label="名称" />
            <el-table-column align="center" label="是否启用" width="160">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.rowStatus"
                  active-color="#FFA712"
                  :active-value="'0'"
                  :inactive-value="'1'"
                  @change="switchUse(scope.row)"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column
              align="center"
              prop="clinicType"
              label="费用要素"
            />
            <el-table-column
              align="center"
              prop="deptType"
              label="资产化属性"
            />
            <el-table-column
              align="center"
              prop="hospitalZone"
              label="控制状态"
            />
            <el-table-column align="center" prop="bdxt" label="变动性态" />-->
            <!-- <el-table-column
              align="center"
              prop="isDealingsBill"
              label="成本核算支出"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.isDealingsBill === "1" ? "是" : "否" }}
              </template>
            </el-table-column>-->
            <!-- <el-table-column
              align="center"
              prop="isDealingsBill"
              label="会计核算支出"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.isDealingsBill === "1" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="isDealingsBill"
              label="绩效考核支出"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.isDealingsBill === "1" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="isDealingsBill"
              label="不计成本支出"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.isDealingsBill === "1" ? "是" : "否" }}
              </template>
            </el-table-column>-->
            <el-table-column align="center" label="操作" width="240">
              <template slot-scope="scope">
                <!-- <span class="edit-detail" @click="editDetail(scope.row)">修改</span> -->
                <!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    class="el-icon-edit-outline"
                    style="
                      padding-top: 4px;
                      font-size: 20px;
                      color: #207efa;
                      cursor: pointer;
                    "
                    @click="editDetail(scope.row)"
                  />
                </el-tooltip> -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                  style="margin-left: 10px"
                >
                  <i
                    class="el-icon-delete"
                    style="
                      padding-top: 4px;
                      font-size: 20px;
                      color: #207efa;
                      cursor: pointer;
                    "
                    @click="deleteDetail(scope.row)"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <Pagination
          :total="pageAttr.total"
          :page="pageAttr.currentPage"
          :page-size="pageAttr.pageSize"
          @pagation="pagationChange"
        />
        <!-- 弹层区域开始 -->
        <Drawer
          :visible="showEidtVlidate"
          :title="drawerTitle"
          width="30%"
          :footer-btns="[
            {
              text: '取消',
              type: 'info',
              trigger: 'cancel',
            },
            {
              text: '确定',
              type: 'primary',
              trigger: 'okBtn',
            },
          ]"
          @cancel="drawClose"
          @okBtn="saveEidtRule"
        >
          <el-form ref="form" :model="form" size="mini" label-width="120px" style="margin-top: 48px">
            <!-- <el-form-item label="编号：">
              <el-input
                v-model="form.edCode"
                :disabled="deptDisabled"
                clearable
                style="width: auto"
              />
            </el-form-item>
            <el-form-item label="名称：">
              <el-input v-model="form.edName" clearable style="width: auto" />
            </el-form-item>-->
            <el-form-item label="费用要素：">
              <el-select v-model="form.edCode" clearable>
                <template v-for="(item, index) in factorOptionList">
                  <el-option
                    v-if="item.edName"
                    :key="index"
                    :value="item.edCode + '/' + item.edName"
                    :label="item.edName"
                  />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="成本项目：">
              <el-select v-model="form.costType" clearable>
                <template v-for="(item, index) in depotBox">
                  <el-option
                    v-if="item.edName"
                    :key="index"
                    :value="item.edCode + '/' + item.edName"
                    :label="item.edName"
                  />
                  <!-- <el-option
                    :key="index"
                    :value="item.edCode + '/' + item.edName"
                    >{{ item.edName }}</el-option
                  >-->
                </template>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="资本化属性：">
              <el-select v-model="form.attr" clearable>
                <template v-for="(item, index) in attrList">
                  <el-option
                    v-if="item.name"
                    :key="index"
                    :value="item.value"
                    >{{ item.name }}</el-option
                  >
                </template>
              </el-select>
            </el-form-item>-->
            <!-- <el-form-item label="控制状态：">
              <el-select v-model="form.contorl" clearable>
                <template v-for="(item, index) in contorlList">
                  <el-option
                    v-if="item.name"
                    :key="index"
                    :value="item.value"
                    >{{ item.name }}</el-option
                  >
                </template>
              </el-select>
            </el-form-item>-->
            <!-- <el-form-item label="变动性态：">
              <el-select v-model="form.change" clearable>
                <template v-for="(item, index) in changeList">
                  <el-option
                    v-if="item.name"
                    :key="index"
                    :value="item.value"
                    >{{ item.name }}</el-option
                  >
                </template>
              </el-select>
            </el-form-item>-->
            <!-- <el-form-item label="成本核算支出：">
              <el-radio-group v-model="form.earning">
                <el-radio :label="'1'">是</el-radio>
                <el-radio :label="'0'">否</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <!-- <el-form-item label="会计核算支出：">
              <el-radio-group v-model="form.kuaji">
                <el-radio :label="'1'">是</el-radio>
                <el-radio :label="'0'">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="计入成本支出：">
              <el-radio-group v-model="form.jiru">
                <el-radio :label="'1'">是</el-radio>
                <el-radio :label="'0'">否</el-radio>
              </el-radio-group>
            </el-form-item>-->
          </el-form>
        </Drawer>
        <!-- 弹层区域结束 -->
      </Container>
    </Container>
    <!-- 页面主体区域结束 -->
  </ContainerGroup>
</template>

<script>
import { batchDeleteEnumDetail } from '../../../utils/apis/basic'
import {
  getEnumDetailSource,
  addEnumDetail,
  modifyEnumDetail,
  getEnumDetailSourcePage
} from '../../../utils/apis/accountingUnit/factor'
import { BasicParams } from '../../../utils/basicParams'
export default {
  name: 'CostProject', // 成本项目对照
  components: {},
  data() {
    return {
      newParamList: {},
      rowStatus: '',
      qyList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已启用',
          value: '0'
        },
        {
          label: '未启用',
          value: '1'
        }
      ],
      edName: '',
      form: {
        costType: '',
        id: '',
        edCode: '',
        edName: ''
      },
      paymentList: [],
      attrList: [],
      changeList: [],
      contorlList: [],
      showEidtVlidate: false,
      drawerTitle: '',
      // 分页参数
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      height: 'fill',
      // 查询参数
      queryForm: [
        {
          label: '名称',
          key: 'edName', // 查询参数的key
          type: 'Input'
        }
      ],
      // 会计分类
      deptType: [],
      // 规则详情表单
      ruleDetail: [],
      isEdit: false,
      deptDisabled: false,
      depotBox: [],
      leftRow: {},
      factorOptionList: []
    }
  },
  created() {},
  mounted() {
    this.getData()
    this.getlistbox()
    this.getFactorList()
    // this.ruleDetail = this.tableData.lcfw;
  },
  methods: {
    getFactorList() {
      const basicParams = new BasicParams()
      basicParams.edParentCode = 'CostItem'
      basicParams.pageSize = 500
      getEnumDetailSourcePage(basicParams).then(res => {
        if (res.data.code === 200) {
          this.factorOptionList = res.data.data.list
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 删除
    deleteDetail(row) {
      this.$confirm({
        content: '是否确认删除？',
        title: '温馨提示',
        okFn: res => {
          const ids = [row.edId]
          batchDeleteEnumDetail(ids).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 请求成功后刷新数据
              this.getData()
            }
          })
        }
      })
    },
    rowClick(row, type) {
      this.leftRow = row
      const basicParams = new BasicParams()
      basicParams.edExtraFirstCode = row.edCode
      basicParams.edParentCode = 'PerformanceItem'
      if (type === 1) {
        basicParams.pageIndex = this.pageAttr.currentPage
        basicParams.pageSize = this.pageAttr.pageSize
      } else {
        this.pageAttr.currentPage = 1
      }
      getEnumDetailSourcePage(basicParams).then(res => {
        if (res.data.code === 200) {
          this.ruleDetail = res.data.data.list
          this.pageAttr.total = res.data.data.total || 0
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取页面数据
    getData() {
      const basicParams = new BasicParams()
      // basicParams.edExtraFirstCode = "";
      // basicParams.edExtraFirstDescription = "";
      // basicParams.edCode = "";
      // basicParams.edName = "";
      // basicParams.edId = 0;
      basicParams.edParentCode = 'BD_AccountSubject'
      getEnumDetailSource(basicParams).then(res => {
        if (res.data.code === 200) {
          const firstData = {
            childrenList: null,
            createdBy: 'System',
            createdOn: '2021-07-16 00:00:00.0',
            edCode: '',
            edEdId: 1,
            edExtraEighthCode: '',
            edExtraEighthDescription: '',
            edExtraFifthCode: '',
            edExtraFifthDescriptoin: '',
            edExtraFirstDescription: '',
            edExtraFourthCode: '',
            edExtraFourthDescriptoin: '',
            edExtraNinthCode: '',
            edExtraNinthDescription: '',
            // eslint-disable-next-line no-dupe-keys
            edExtraFirstCode: '',
            edExtraSecondDescription: '',
            edExtraSeventhCode: '',
            edExtraSeventhDescription: '',
            edExtraSexthCode: '',
            edExtraSexthDescription: '',
            edExtraThirdCode: '',
            edExtraThirdDescription: '',
            edId: '1',
            edName: '全部',
            edOrder: 0,
            edParentCode: 'BD_DepartCategory',
            isLike: null,
            remark: '',
            rowStatus: 0,
            updatedBy: 'System',
            updatedOn: '2021-07-16 00:00:00.0'
          }
          res.data.data.unshift(firstData)
          this.deptType = res.data.data
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs.table.setCurrentRow(this.$refs.table.data[0])
              this.rowClick(this.$refs.table.data[0])
            }, 50)
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getlistbox() {
      const basicParams = new BasicParams()
      // basicParams.edExtraFirstCode = "";
      // basicParams.edExtraFirstDescription = "";
      // basicParams.edCode = "";
      // basicParams.edName = "";
      // basicParams.edId = 0;
      basicParams.edParentCode = 'BD_AccountSubject'
      getEnumDetailSource(basicParams).then(res => {
        if (res.data.code === 200) {
          this.depotBox = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 分页
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page
      this.pageAttr.pageSize = payload.pageSize
      this.getSetData()
    },
    // getPageList() {
    //   let basicParams = new BasicParams();
    //   basicParams.edExtraFirstCode = this.leftRow.edCode;
    //   basicParams.edParentCode = "PerformanceItem";
    //   basicParams.pageIndex = this.pageAttr.currentPage;
    //   basicParams.pageSize = this.pageAttr.pageSize;
    //   getEnumDetailSourcePage(basicParams).then((res) => {
    //     if (res.data.code === 200) {
    //       this.ruleDetail = res.data.data.list;
    //       this.pageAttr.total = res.data.data.total || 0;
    //     } else {
    //       this.$message.error(res.data.message);
    //     }
    //   });
    // },
    // 新增
    addDetail() {
      this.isEdit = false
      this.drawerTitle = '新增成本项目'
      this.showEidtVlidate = true
      this.showDetail()
    },
    // 新增/ 编辑
    showDetail(row) {
      const basicParams = new BasicParams()
      basicParams.edParentCode = 'PerformanceItem'
      if (this.isEdit) {
        this.deptDisabled = true
        basicParams.edCode = row.edCode
        basicParams.edExtraFirstCode = ''

        getEnumDetailSource(basicParams).then(res => {
          if (res.data.code === 200) {
            this.form.edCode = res.data.data[0].edCode + '/' + res.data.data[0].edName
            // this.form.edName = res.data.data[0].edName
            this.form.costType =
              res.data.data[0].edExtraFirstCode +
              '/' +
              res.data.data[0].edExtraFirstDescription
            this.form.id = res.data.data[0].edId
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.deptDisabled = false
        this.form.edCode = ''
        this.form.edName = ''
        this.form.costType = ''
      }
      this.showEidtVlidate = true
    },
    // 编辑
    editDetail(row) {
      this.isEdit = true
      this.drawerTitle = '修改成本项目'
      this.showEidtVlidate = true
      this.showDetail(row)
    },
    // 是否启用
    switchUse(row) {
      const basicParams = new BasicParams()
      basicParams.edId = row.edId
      basicParams.rowStatus = row.rowStatus
      basicParams.edParentCode = 'PerformanceItem'
      modifyEnumDetail(basicParams).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getNewData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getNewData() {
      const basicParams = new BasicParams()
      basicParams.edExtraFirstCode = this.leftRow.edCode
      basicParams.edParentCode = 'PerformanceItem'
      // if (type == 1) {
      //   basicParams.pageIndex = this.pageAttr.currentPage;
      //   basicParams.pageSize = this.pageAttr.pageSize;
      // } else {
      //   this.pageAttr.currentPage = 1;
      // }
      this.pageAttr.currentPage = 1
      getEnumDetailSourcePage(basicParams).then(res => {
        if (res.data.code === 200) {
          this.ruleDetail = res.data.data.list
          this.pageAttr.total = res.data.data.total || 0
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 重置查询表单
    reset() {
      // console.log('reset')
    },
    // 设置第一行为选中状态
    setFirstRowSelected() {
      this.$refs.table.setCurrentRow(this.$refs.table.data[0])
    },
    drawClose() {
      this.showEidtVlidate = false
    },
    handleReset() {
      this.edName = ''
      this.rowStatus = ''
      this.getSetData()
    },

    // 查询接口
    getSetData() {
      const basicParams = new BasicParams()
      basicParams.edName = this.edName
      basicParams.edParentCode = 'BD_AccountSubject'
      basicParams.edExtraFirstCode = this.leftRow.edCode
      basicParams.edParentCode = 'PerformanceItem'
      basicParams.rowStatus = this.rowStatus
      basicParams.pageIndex = this.pageAttr.currentPage
      basicParams.pageSize = this.pageAttr.pageSize
      getEnumDetailSourcePage(basicParams).then(res => {
        if (res.data.code === 200) {
          this.ruleDetail = res.data.data.list
          this.pageAttr.total = res.data.data.total || 0
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    saveEidtRule() {
      const basicParams = new BasicParams()
      basicParams.edExtraFirstCode = ''
      basicParams.edCode = this.form.edCode.split('/')[0]
      basicParams.edName = this.form.edCode.split('/')[1]
      basicParams.edExtraFirstCode = this.form.costType.split('/')[0]
      basicParams.edExtraFirstDescription = this.form.costType.split('/')[1]
      basicParams.edParentCode = 'PerformanceItem'
      basicParams.edExtraSecondCode = []
      if (this.isEdit) {
        basicParams.edId = this.form.id
        modifyEnumDetail(basicParams).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getNewData()
            this.showEidtVlidate = false
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        basicParams.edId = ''
        addEnumDetail(basicParams).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getNewData()
            this.showEidtVlidate = false
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.query-box {
  flex: 1;
}
.dept-type {
  padding: 0 !important;
  flex: 0 0 240px;
  margin-right: 10px;
}
.rule-detail {
  padding: 0 !important;
  flex: 1;
}
.title {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #e8eaed;
}
.edit-detail {
  color: #4073ff;
  cursor: pointer;
}
.button-bar {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 12px;
  button:first-of-type {
    margin-right: 12px;
  }
}
.is-child {
  display: inline-block;
  padding-left: 12px;
}
.not-child {
  font-weight: bold;
}
.table-box {
  box-sizing: border-box;
  padding: 0 12px 12px 12px;
  height: calc(100% - 230px);
}
.query-form {
  display: flex;
  justify-content: space-between;
}
.query-btn {
  display: inline-flex;
}
/deep/ .dept-type .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #217dfa;
  color: #fff;
}
/deep/ .el-table__body tr.current-row > td {
  background-color: #217dfa;
  color: #fff;
}
</style>

